Largest Contentful Paint : zoom sur l’un des signaux des Core Web Vitals de Google

Que vous surveillez les mises à jour de Google de près ou de loin, vous n’êtes sûrement pas passé à côté des Core Web Vitals. Depuis quelques années maintenant, il s’agit de critères de “vitesse” essentiels aux bonnes performances de votre site Web. La règle est simple : vous voulez être bien positionné dans Google ? Optimisez vos CWV !

Le rapport de vitesse propose deux nouveaux indicateurs de performance : CLS et LCP, qui s’ajoutent au FID. CLS ? LCP ? FID Kesako ?

On se penche dans cet article sur le LCP ou Largest Contentful Paint pour vous aider à y voir plus clair !

Rappel : le Page Experience de Google comme facteur de ranking UX

Pour commencer, un mot rapide sur le calendrier, le Page Experience a été lancé en mai 2021.

Si votre site Web n’est pas encore conforme avec les objectifs annoncés, vous êtes dans les retardataires mais il est encore temps d’optimiser vos pages pour les Core Web Vitals.

Selon la documentation dédiée à la « Page Experience »:

Page Experience désigne un ensemble de signaux mesurant comment les utilisateurs perçoivent l’expérience d’interaction avec une page, au-delà de sa seule valeur informative.

L’utilisation du HTTPS, le caractère Mobile Friendly ou encore l’absence d’interstitiels intrusifs, font partie des signaux déjà documentés. Les CWV sont au cœur de ce Google Page Experience. Il s’agit d’un ensemble d’indicateurs de performance qui mesurent l’expérience d’utilisateurs sur le chargement (LCP: Largest Contentful Paint), l’interactivité (FID: First Input Delay), et la stabilité visuelle de la page (CLS: Cumulative Layout Shift).

Core Web Vitals : LCP, FID et CLS

Largest Contentful Paint (LCP) – Performance du chargement

Le Largest Contentful Paint mesure le délai nécessaire au rendu de l’élément de contenu de la page le plus important  (en surface, à l’intérieur du viewport, donc visible sans avoir à scroller).

Selon les objectifs établis par Google, vos visiteurs devraient faire face à un LCP de moins 2,5 secondes, au moins pour 75% de votre audience (ce qui inclut à la fois le trafic desktop et mobile)

First Input Delay (FID) – Interactivité

Le First Input Delay (FID) mesure le délai subi par un utilisateur lorsqu’il interagit avec la page pour la première fois (exemple: le délai pour obtenir une réaction de la page lors du premier clic)

Selon les objectifs établis par Google, vos visiteurs ne devraient pas rencontrer de délai de plus de 100ms. Au moins 75% de votre audience (ce qui inclut à la fois le trafic desktop et mobile) doit avoir un FID inférieur à 100ms.

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo

Total Blocking Time : une alternative au FID

Par définition, pour collecter le FID, une interaction est nécessaire. Il n’est donc pas possible de mesurer le FID sans avoir un utilisateur réel interagissant avec la page.

Pour contourner cela, il reste possible de mesurer la valeur maximum théorique du FID, qu’on nomme le Max Potential FID.

Les outils de monitoring synthétique collectent le Max Potential FID. Pour obtenir les résultats réels du FID, vous devrez les collecter directement sur votre audience (la Search Console et le Chrome UX Report sont de bons outils pour commencer).

Le Max Potential FID représente le pire scénario (quel que soit le moment supposé de l’interaction).

Google suggère d’utiliser le Total Blocking Time comme alternative au FID quand il n’est pas disponible pour jauger de l’interactivité des pages.

Cumulative Layout Shift (CLS) – Stabilité visuel

Le CLS mesure la somme totale des décalages survenant sur l’interface (du contenu qui “saute”) tout au long de la navigation sur la page (y compris après que l’utilisateur scrolle ou fasse d’autres actions). Le CLS est d’autant plus important que les décalages concernent de grandes zones et que la distance du décalage est importante. Le CLS exclut les décalages qui succèdent directement à une interaction de l’utilisateur (moins de 500ms après) : ils sont considérés volontaires et souhaitables.

Selon les objectifs établis par Google, vos visiteurs devraient enregistrer une valeur CLS de moins 0.1, au moins pour 75% de votre audience (ce qui inclut à la fois le trafic desktop et mobile).

Plaire aux robots de Google 

> Optimisez les performances de votre site Web 
> Séduire les algorithmes des moteurs de recherche 

Découvrir le guide

Comment est calculé le Largest Contentful Paint ?

Selon les éléments précisés dans l’API Largest Contentful Paint, les éléments pris en compte pour le calcul du LCP sont les suivants :

éléments <img>

éléments <image> dans un élément <svg>

éléments <video> (vignette “poster” ou première image de la vidéo)

éléments avec une image de fond chargée via la fonction url() (par opposition à un CSS gradient)

éléments Block-level contenant des text nodes ou des éléments texte inlinés dépendants.

Notez que Google fait en sorte d’ajouter des éléments au fur et à mesure (svg, video) pour favoriser la simplicité dans les affichages, mais exclut aussi des éléments (images de fonds occupant pleinement le viewport). N’hésitez pas à consulter le changelog du Largest Contentful Paint pour en savoir plus.

Largest Contentful Paint : comment l’optimiser ?

La question à se poser est plutôt : quels sont les éléments qui empêchent à mon LCP d’être optimale ? On en dénote plusieurs :

• Des serveurs avec un temps de réponse parfois trop long
• Des appels API, de l’exécution JavaScript ou du CSS qui bloquent le rendu
• Des ressources qui se chargent lentement

En cherchant à résoudre les problèmes présents dans ces différents éléments, vous aurez plus de facilité à optimiser votre Largest Contentful Paint.

Plaire aux robots de Google 

> Optimisez les performances de votre site Web 
> Séduire les algorithmes des moteurs de recherche 

Découvrir le guide

Exemples de résolution :

• Côté serveur, évitez d’en avoir qu’un seul. Utilisez un réseau de serveurs CDN (Content Delivery Network) répartis dans différentes zones du globe. Ainsi vos utilisateurs n’auront pas besoin d’attendre suite aux requêtes réseau vers des serveurs éloignés.
• Niveau CSS, lisez notre article sur la minification CSS qui va permettre une meilleure lisibilité. En effet, les fichiers CSS peuvent contenir des éléments inutiles comme les espaces, indentations, commentaires etc qui peuvent être supprimés. Ne perdez pas trop de temps à “nettoyer” vos CSS. Ce n’est pas inutile, mais ce n’est pas ce qui impacte le plus votre performance.
• Prenons vos ressources : vos images sont-elles optimisées ? C’est un basique mais ESSENTIEL au bon chargement de vos pages. Parfois même, demandez vous si l’utilisation de votre image est nécessaire car la meilleure méthode reste de la supprimer si elle est trop lourde et n’est pas indispensable à votre contenu. Ensuite compresser et convertissez vos images en WebP dans l’idéal. N’oubliez pas également d’utiliser des images responsives.
• N’oubliez pas que le LCP peut également être très impacté par votre solution de collecte du consentement. Vous savez, cette modale qui s’ouvre quasiment en pleine page en mobile ? Est-elle optimisée ?
• Enfin, mais c’est le plus importat, du côté de l’orchestration du rendu dans le navigateur, la réduction de la quantité de JavaScript est une priorité à avoir en tête. Cependant, vous devriez également envisager de combiner le rendu côté serveur pour améliorer autant que possible Largest Contentful Paint.

D’après une autre page de documentation de Google :

“Core Web Vitals [… ] should be measured by all site owners.”

Alors n’attendez plus pour vous équiper, surveillez les performances de votre site avec notamment l’indicateur Largest Contentful Paint avec Contentsquare et bénéficiez de rapports simples d’utilisation, tout comme nos dashboards et nos alertes en temps réel.

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo